<template>
  <view class="score-detail-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="navigateBack">
        <uni-icons type="left" size="20"></uni-icons>
      </view>
      <view class="nav-title">成绩详情</view>
      <view class="nav-right"></view>
    </view>

    <!-- 主要内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 成绩趋势图卡片 -->
      <view class="chart-card">
        <view class="card-header">
          <view class="card-title">成绩趋势图</view>
          <view class="chart-period">最近6个月</view>
        </view>
        <view class="chart-container">
          <qiun-data-charts
            type="line"
            :chartData="chartData"
            :opts="chartOptions"
            canvasId="scoreTrendChart"
            width="100%"
            height="400rpx"
          ></qiun-data-charts>
        </view>
      </view>

      <!-- 成绩记录卡片 -->
      <view class="records-card">
        <view class="card-header">
          <view class="card-title">成绩记录</view>
          <view class="records-count">共{{scoreRecords.length}}条记录</view>
        </view>
        <view class="records-list">
          <!-- 成绩记录项 -->
          <view class="record-item" v-for="record in scoreRecords" :key="record.id">
            <view class="record-info">
              <view class="subject-info">
                <view class="subject-icon" :style="{backgroundColor: getSubjectColor(record.subject)}">
                  <uni-icons :type="getSubjectIcon(record.subject)" size="18" color="#fff"></uni-icons>
                </view>
                <view class="subject-name">{{record.subject}}</view>
              </view>
              <view class="score-info">
                <view class="score">{{record.score}}分</view>
                <view class="exam-date">{{record.date}}</view>
              </view>
            </view>
            <view class="exam-type">{{record.examType}}</view>
          </view>

          <!-- 加载更多按钮 -->
          <view class="load-more" @click="loadMoreRecords">
            <uni-icons type="down" size="14"></uni-icons>
            <text>加载更多记录</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
// 导入qiun-data-charts组件
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'


export default {
  components: {
    qiunDataCharts
  },
  data() {
    return {
      goalId: '',
      chartData: {
        categories: ['2月', '3月', '4月', '5月', '6月', '7月'],
        series: [
          {
            name: '语文',
            color: '#36CFC9',
            data: [82, 85, 83, 87, 86, 85]
          },
          {
            name: '数学',
            color: '#597EF7',
            data: [88, 90, 92, 89, 91, 92]
          },
          {
            name: '英语',
            color: '#FF7D00',
            data: [76, 78, 75, 80, 79, 78]
          }
        ]
      },
      chartOptions: {
        color: ['#36CFC9', '#597EF7', '#FF7D00'],
        padding: [10, 10, 10, 0],
        legend: {
          show: true,
          position: 'bottom',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: 12
          }
        },
        xAxis: {
          gridType: 'dash',
          dashLength: 4
        },
        yAxis: {
          gridType: 'dash',
          dashLength: 4,
          splitNumber: 5,
          min: 60,
          max: 100
        },
        line: {
          width: 3,
          smooth: true,
          symbol: 'emptyCircle',
          symbolSize: 6
        },
        area: {
          opacity: 0.1
        }
      },
      scoreRecords: [
        {
          id: 1,
          subject: '语文',
          score: 85,
          examType: '2024年8月月考',
          date: '2024-08-15'
        },
        {
          id: 2,
          subject: '数学',
          score: 92,
          examType: '2024年8月月考',
          date: '2024-08-12'
        },
        {
          id: 3,
          subject: '英语',
          score: 78,
          examType: '2024年7月期末考试',
          date: '2024-07-20'
        }
      ]
    };
  },
  onLoad(options) {
    // 从路由参数中获取目标ID
    if (options.goalId) {
      this.goalId = options.goalId;
      // 这里可以根据goalId从服务器获取成绩数据
      this.loadScoreData();
    }
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },
    
    // 加载成绩数据
    loadScoreData() {
      // 实际项目中这里应该是API调用
      // 这里使用模拟数据
      console.log('加载目标ID为', this.goalId, '的成绩数据');
      // 模拟异步加载
      setTimeout(() => {
        // 数据已在data中初始化
      }, 500);
    },
    
    // 获取科目对应的图标
    getSubjectIcon(subject) {
      const iconMap = {
        '语文': 'book',
        '数学': 'navigate',
        '英语': 'tickets'
      };
      return iconMap[subject] || 'help';
    },
    
    // 获取科目对应的颜色
    getSubjectColor(subject) {
      const colorMap = {
        '语文': '#36CFC9',
        '数学': '#597EF7',
        '英语': '#FF7D00'
      };
      return colorMap[subject] || '#999999';
    },
    
    // 加载更多记录
    loadMoreRecords() {
      // 实际项目中这里应该是加载更多数据的API调用
      // 这里模拟添加更多数据
      const moreRecords = [
        {
          id: 4,
          subject: '语文',
          score: 86,
          examType: '2024年7月期中考试',
          date: '2024-07-10'
        },
        {
          id: 5,
          subject: '数学',
          score: 89,
          examType: '2024年7月期中考试',
          date: '2024-07-08'
        }
      ];
      // 添加动画效果
      this.scoreRecords = [...this.scoreRecords, ...moreRecords];
    }
  }
};
</script>

<style lang="scss" scoped>
.score-detail-container {
  height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.nav-bar {
  height: 44px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #eeeeee;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.nav-left,
.nav-right {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
}

/* 主要内容区域 */
.content {
  flex: 1;
  padding: 70px 16px 60px;
  box-sizing: border-box;
}

/* 卡片样式 */
.chart-card,
.records-card {
  background-color: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
}

.chart-period,
.records-count {
  font-size: 12px;
  color: #999999;
}

/* 图表容器 */
.chart-container {
  width: 100%;
  height: 400rpx;
  box-sizing: border-box;
}

/* 成绩记录列表 */
.records-list {
  width: 100%;
}

.record-item {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.record-item:last-child {
  border-bottom: none;
}

.record-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.subject-info {
  display: flex;
  align-items: center;
}

.subject-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.subject-name {
  font-size: 14px;
  color: #333333;
}

.score-info {
  text-align: right;
}

.score {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
}

.exam-date {
  font-size: 12px;
  color: #999999;
}

.exam-type {
  font-size: 14px;
  color: #666666;
}

/* 加载更多按钮 */
.load-more {
  width: 100%;
  padding: 16px 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  font-size: 14px;
}

.load-more text {
  margin-left: 8px;
}
</style>